const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const WebpackDeepScopePlugin = require("webpack-deep-scope-plugin").default;
const PurgecssWebpackPlugin = require("purgecss-webpack-plugin");
const path = require("path");
const globAll = require("glob-all");
const srcAbs = path.resolve(__dirname, "src");
const htmlPath = path.resolve(__dirname, "public/index.html");
const paths = globAll.sync([`${srcAbs}**/*.js`, htmlPath]);

console.log("🚀 ~ paths:", paths);
module.exports = {
  mode: "production",
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  optimization: {
    minimizer: [new TerserPlugin(), new OptimizeCssAssetsWebpackPlugin()],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: "./public/index.html",
    }),
    new MiniCssExtractPlugin({
      filename: "[name].[hash:5].css",
    }),
    new WebpackDeepScopePlugin(), // 有些第三包没有使用，但是对于webpack中的tree-shaking依旧会打包到源代码中，本质时分析的不够彻底，该plugin慎用，因为改包更新不频繁。
    new PurgecssWebpackPlugin({
      // paths: [
      //   path.resolve(__dirname, "public/index.html"),
      //   path.resolve(__dirname, "src/index.js"),
      // ], // 生成的css与具体的那个hmtl进行对比，以保持css的tree-shaking, 对css_module无效，因为其内部使用的正则匹配，而css_module会修改类名
      paths: paths,
    }),
  ],
  stats: {
    colors: true,
    chunks: false,
    modules: false,
  },
};
